<template>
  <el-aside width="auto" height="auto">
    <el-menu :collapse="isCollapse" :default-active="onRoutes" background-color="#232323" text-color="#ccc"
      active-text-color="#ddd" unique-opened router>
      <template v-for="item in items">

        <template v-if="item.children.length>0">
          <el-submenu :index="item.path">
            <template slot="title">
              <i :class="item.iconCls"></i>
              <span slot="title">{{ item.nameZh }}</span>
            </template>

            <template v-for="subItem in item.children">
              <template v-if="subItem.children.length>0">
                <el-submenu :index="subItem.path">
                  <template slot="title">
                    <i :class="subItem.iconCls"></i>
                    <span slot="title">{{ subItem.nameZh }}</span>
                  </template>
                  <el-menu-item v-for="(childrens, j) in subItem.children" :index="childrens.path" :key="j">
                    <i :class="childrens.iconCls"></i>
                    {{ childrens.nameZh }}
                  </el-menu-item>
                </el-submenu>
              </template>
              <template v-else>
                <el-menu-item :index="subItem.path">
                  <i :class="subItem.iconCls"></i>
                  {{ subItem.nameZh }}
                </el-menu-item>
              </template>
            </template>
          </el-submenu>
        </template>

        <template v-else>
          <el-menu-item :index="item.path">
            <i :class="item.iconCls"></i>
            <span slot="title">{{ item.nameZh }}</span>
          </el-menu-item>
        </template>
      </template>
    </el-menu>
  </el-aside>
</template>

<script>
import Bus from "./bus";
import { getAll,getMenu } from "@/api/systemManage/menuManage";

export default {
  name: "Sidebar",
  data () {
    return {
      isCollapse: false,
      items: []

    };
  },
  computed: {
    onRoutes () {
      return this.$route.fullPath;
    },
  },
  methods: {
    getMenu () {
      // getAll().then((res) => {
      //   this.items=res.data
      // })
      getMenu().then((res)=>{
        this.items=res.data
      })
    }
  },
  created () {
    // this.getMenu()
    // 通过 event bus进行组件间的通信 来折叠和展开侧边栏
    Bus.$on("collapse", (isCollapse) => {
      this.isCollapse = isCollapse;
    });
  },
  mounted () {
    this.getMenu()
  }
};
</script>

<style scoped lang="less">
.el-menu {
  height: 100%;
  border: none;

  &:not(.el-menu--collapse) {
    width: 200px;
  }
}

.el-menu-item.is-active {
  // border-left: 3px solid #2eb3ff;

  background-color: #171717 !important;
  color: #2eb3ff !important;
  font-weight: 600;
}
</style>
